<template>
  <div>
    <van-nav-bar class="navbar">
      <template #title>
        <van-button plain icon="search" type="info" round class="search-btn" @click="$router.push('/search')">
          搜索
        </van-button>
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" swipeable>
      <van-tab :title="item.name" v-for="item in mychannel" :key="item.id">
        <article-list :channel-id="item.id"></article-list>
      </van-tab>
      <span class="toutiao toutiao-gengduo" @click="isshowEdit=true"></span>
    </van-tabs>
    <van-popup v-model="isshowEdit" position="bottom" :style="{ height: '100%',width:'100%' }" closeable
      close-icon-position="top-left">
      <edit-popup :my-channels="mychannel" @deldata-channels="delbtn" @add-channels="addchannel"
        @updata-active="[active=$event,isshowEdit=false]">
      </edit-popup>
    </van-popup>
  </div>
</template>

<script>
import { getChannelAPI, delChannelsAPI, addChannelsAPI } from '@/api'
import EditPopup from '@/components/EditPopup.vue'
import ArticleList from './commponents/ArticleList.vue'
import { mapGetters, mapMutations } from 'vuex'
export default {
  created() {
    this.initChannels()
  },
  computed: {
    ...mapGetters(['isLogin'])
  },
  components: {
    ArticleList,
    EditPopup
  },
  data() {
    return {
      active: 0,
      mychannel: [],
      isshowEdit: false
    }
  },
  methods: {
    ...mapMutations(['MY_CHANNEL']),
    async initChannels() {
      //判断是否登录
      if (this.isLogin) {
        this.getUserChannel()
      } else {
        //判断默认登录，是否有数据
        const { myChannels } = this.$store.state
        if (myChannels.length > 0) {
          this.mychannel = myChannels
        } else {
          await this.getUserChannel()
          this.MY_CHANNEL(this.mychannel)
        }
      }
    },
    async getUserChannel() {
      const { data: res } = await getChannelAPI()
      //  console.log(res)
      this.mychannel = res.data.channels
    },
    async delbtn(id) {
      const newChannels = this.mychannel.filter(item => item.id !== id)
      try {
        if (this.isLogin) {
          await delChannelsAPI(id)
        } else {
          //未登录存储到本地存储
          this.MY_CHANNEL(newChannels)
        }
        this.mychannel = newChannels
        this.$toast.success('删除频道成功')
      } catch (error) {
        this.$toast.fail('删除频道失败')
      }
    },
    async addchannel(item) {
      //添加频道
      if (this.isLogin) {
        await addChannelsAPI(item.id, this.mychannel.length)
      } else {
        //未登录存储到本地存储
        this.MY_CHANNEL([...this.mychannel, item])
      }
      this.mychannel.push(item)
    }
  }
}

</script>

<style lang="less" scoped>
:deep(.navbar) {
  background-color: #3296fa;

  .van-nav-bar__title {
    max-width: unset;
  }

  .search-btn {
    width: 7.4rem;
    height: 0.85333rem;
    color: #fff;
    background-color: #5babfb;
    border: unset
  }
}

/* tabs导航条样式 */
:deep(.van-tabs__wrap) {
  padding-right: 66px;

  .van-tabs__nav {
    padding-left: 0;
    padding-right: 0;

    /* tab标签 */
    .van-tab {
      border: 1px solid #eee;
      width: 200px;
      height: 82px;
    }

    /* tab标签下划线 */
    .van-tabs__line {
      width: 31px;
      height: 6px;
      background-color: #3296fa;
      bottom: 40px;
    }
  }
}

/* 字体图标 */
.toutiao-gengduo {
  position: absolute;
  top: 0;
  right: 0;
  width: 66px;
  height: 82px;
  font-size: 40px;
  line-height: 82px;
  text-align: center;
  opacity: 0.6;
  border-bottom: 1px solid #eee;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 1px;
    background-image: url('~@/assets/images/gradient-gray-line.png');
  }
}
</style>
